<template>
  <div class="imgList">
    <div class="imgList-item" v-for="(item, index) in data" :key="index">
      <ElImgBox :data="item" v-bind="$attrs" :urlKey="urlKey" :width="width" :height="height || width"
        :operate="isEdit ? operate : []" @clickBtn="(operateRow: any, row: any) => {
          if (operateRow.click && typeof operateRow.click === 'function') {
            operateRow.click(row, index)
          }
        }" />
    </div>
    <div class="imgList-item" v-if="isEdit && operate">
      <ElUploadBox :data="data" type="all" :accept="accept" @changeBtn="changeBtn">
        <div class="imgList-btn" :style="{
          width: proxy.$size(width),
          height: proxy.$size(width),
        }">
          <el-icon>
            <Plus />
          </el-icon>
          <p>上传图片</p>
        </div>
      </ElUploadBox>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance, ref } from 'vue';
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    data?: any;
    urlKey?: string;
    operate?: any;
    width?: number | string;
    height?: number | string;
    margin?: number | string;
    accept?: any; //限制文件
    isEdit?: boolean; //是否编辑
  }>(),
  {
    accept: '.jpg,.jpeg,.png,.gif',
    width: 160,
  },
);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'changeBtn', files: any, dataInfo: any, res: any): void;
}>();
const changeBtn = (files: any, dataInfo: any, res: any) => {
  emit('changeBtn', files, dataInfo, res);
};


</script>
<style scoped lang="scss">
.imgList {
  --m: 8px;
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--m) * -1);
  margin-bottom: calc(var(--m) * -1);

  .imgList-item {
    display: flex;
    margin-right: var(--m);
    margin-bottom: var(--m);
  }

  .imgList-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px $border solid;
    color: var(--el-text-color-secondary);

    .el-icon {
      font-size: 30px;
    }

    p {
      font-size: 12px;
    }

    &:hover {
      border-color: $primary;
      color: $primary;
    }
  }
}
</style>
